<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../static/knockout-3.3.0.js">
	
</script>
</head>
<body>
	<p>
		Name: <input data-bind="hasFocus: editingName" />
	</p>
	<!-- Showing that we can both read and write the focus state -->
	<div data-bind="visible: editingName">You're editing the name</div>
	<button
		data-bind="enable: !editingName(), click:function() { editingName(true) }">Edit
		name</button>

	<script type="text/javascript">
		var viewModel = {
			editingName : ko.observable()
		};
		ko.applyBindings(viewModel);
	</script>
</body>
<script type="text/javascript">
	ko.bindingHandlers.hasFocus = {

		init : function(element, valueAccessor) {
			$(element).focus(function() {
				var value = valueAccessor();
				value(true);
			});

			$(element).blur(function() {
				var value = valueAccessor();
				value(false);
			});
		},

		update : function(element, valueAccessor) {
			var value = valueAccessor();
			if (ko.utils.unwrapObservable(value))
				element.focus();
			else
				element.blur();
		}
	};
</script>
</html>